<template>
	<view class="diary-container">
		<view class="diary-date">
			<view class="day">
				{{day}}
			</view>
			<view class="month">
				{{`${month}月/周${week}`}}
			</view>
		</view>
		<view class="diary-content" @click="goDetail(props.diary)">
			<view class="title">
				{{props.diary.title}}
			</view>
			<view class="content">
				{{props.diary.content}}
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		computed,
		nextTick,
	} from "vue";
	import dayjs from "dayjs";

	const props = defineProps({
		diary: {
			type: Object
		}
	})

	// 星期标题
	const weekDays = ['日', '一', '二', '三', '四', '五', '六'];

	const date = computed(() => {
		if (props.diary && props.diary.recordTime) {
			return dayjs(props.diary.recordTime)
		} else {
			return dayjs()
		}

	})
	const day = computed(() => {
		return date.value.date()
	})

	const week = computed(() => {
		return weekDays[date.value.day()]
	})


	const month = computed(() => {
		return date.value.month() + 1
	})

	const goDetail = (val) => {
		uni.navigateTo({
			url: `/pages/index/detail/index?id=${val.id}`
		})
	}
</script>

<style lang="scss">
	.diary-container {
		display: flex;
		margin: 20rpx;
		background-color: #ffffff;
	}

	.diary-date {
		width: 90rpx;
		padding: 20rpx;

		.day {
			font-size: 20px;
			color: #000000;
		}

		.month {
			font-size: 10px;
			color: #a5a5a5;
		}
	}

	.diary-content {
		border-radius: 30rpx;
		box-shadow: 2rpx 2rpx 4rpx rgba(89, 89, 89, 0.5);
		padding: 20rpx;
		flex: 1;

		.title {
			font-size: 14px;
			color: #595959;
		}

		.content {
			display: -webkit-box;
			margin-top: 4rpx;
			color: #818181;
			font-size: 12px;
			-webkit-line-clamp: 10;
			-webkit-box-orient: vertical;
			/* 显示3行 */
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>